<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		canvas {border: 1px solid black;}
	</style>
	<body>
		<canvas id="canvasq" width="1000" height="1000"></canvas>
		
		
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let ocan=document.getElementById('canvasq');
			let ppen=ocan.getContext('2d');
			
			let qqq=[{value:10,color:"green",name:'one'},
					{value:20,color:'blue',name:'two'},
					{value:40,color:'red',name:'three'},
					{value:100,color:'purple',name:'four'}];
//					
//					
//					
//						createSector(ppen,300,300,60,qqq);
//					
//					
					function createSector(oPen,x,y,r,data){
						let sum=0;
						for(var i=0;i<data.length;i++){
							sum+=data[i].value;
						}
						
						for(var i=0;i<data.length;i++){
							data[i].percentage=(data[i].value*1.0)/sum*360;
						}
						
						let startAngle=0;
//						
//						for(var i=0;i<data.length;i++){
//							oPen.beginPath();
//							oPen.moveTo(x,y);
//							oPen.arc(x,y,r,startAngle,startAngle+(Math.PI/180)*data[i].percentage,false);
//							startAngle+=(Math.PI/180)*data[i].percentage;
//							oPen.fillStyle=data[i].color;
//							oPen.fill();
//							
						}
					
//					ppen.lineWidth=20;
//					ppen.lineJoin='miter';
//					
//					ppen.moveTo(200,200);
//					ppen.lineTo(300,300);
//					ppen.lineTo(200,400);
					
				
					
					let text='aaaa';
					ppen.font='bold   40px 微软雅黑';
					
					ppen.fillStyle='black';
					ppen.moveTo(150,0);
					ppen.lineTo(150,200);
					
					ppen.textAlign='center'
					ppen.fillText(text,500,30);
					
					
					
					
//					var textp=ppen.measureText(text).width;
//					var canvasWidth=ocan.width;
//					
//					xPosition=(canvasWidth/2)-textp/2;
//					ppen.fillText(text,xPosition,40);					
//					console.log(xPosition);
					
//					function center(huabu,pen,txt){
//						let text=txt;
//						
//						var textp=pen.measureText(text).width;
//						var canvasWidth=huabu.width;
//						xPosition=(canvasWidth/2)-textp/2;
//					    pen.fillText(text,xPosition,40);
//					    console.log(xPosition);
//					}
//					center(ocan,ppen,'aaa');
//					
//					function right(huabu,pen,txt){
//						let text=txt;
//						
//						var textp=pen.measureText(text).width;
//						var canvasWidth=huabu.width;
//						xPosition=canvasWidth-textp;
//					    pen.fillText(text,xPosition,40);
//					    console.log(xPosition);
//					}
//					right(ocan,ppen,'右侧');
					
					function texta(open,txt,type){
						open.strokeStyle='cornflowerblue';
						open.font='bold   40px 微软雅黑';
						let txtwidth=open.measureText(txt).width;
						if(type==="center"){
							let x= (1000-txtwidth)/2.0;
							open.strokeText(txt,x,40);
							
						}
						if(type==="right"){
							let x=1000-txtwidth;
							open.strokeText(txt,x,40);
						}
						
					}
					texta(ppen,'ssss',"right")
					
					
					
//					let arr=[10,12];
//					ppen.setLineDash(arr);
//					ppen.moveTo(400,400);
//					ppen.lineTo(900,400);
//					ppen.lineTo(900,900);
//					ppen.lineTo(400,900);
//					ppen.lineTo(400,400);
//					
					
					ppen.stroke();
					
		}
	</script>
</html>
